<template>
  <div v-title data-title="借贷">
    <home-swiper :list="swiperList" v-if="swiperList.length && isKeep"></home-swiper>
    <div class="waitting-swiper" v-if="(!swiperList.length || !isKeep) && waitingShow">
      <img class="logo" src="/static/img/logo_grey@2x.png">
    </div>
    <div class="tab-icon-container">
        <div class="tab-icon-item" @click="getList(1,'','热门推荐')">
          <img class="tab-icon-img" src="/static/img/home_ic_compture@2x.png"/>
          <span class="tab-icon-desc">热门推荐</span>
        </div>
      <div class="tab-icon-item" @click="getList('','big','大额低息')">
        <img class="tab-icon-img" src="/static/img/home_btn_iphoe@2x.png"/>
        <span class="tab-icon-desc">大额低息</span>
      </div>
      <div class="tab-icon-item" @click="getList('','small','小额速贷')">
        <img class="tab-icon-img" src="/static/img/Group%2011@2x.png"/>
        <span class="tab-icon-desc">小额速贷</span>
      </div>
      <div class="tab-icon-item" @click="toContent">
        <img class="tab-icon-img" src="/static/img/home_ic_education@2x.png"/>
        <span class="tab-icon-desc">全部</span>
      </div>
    </div>
    <seamless-scroll></seamless-scroll>
    <div class="list-title">{{listName}}</div>
    <div class="lists-content">
      <content-card v-if="productList.length" :productList="productList"></content-card>
      <div class="loading-container" v-show="loadding">
        <loading></loading>
      </div>
      <no-data v-if="!productList.length && !loadding"></no-data>
    </div>
  </div>
</template>
<script>
  import { mapMutations } from 'vuex'
  import HomeSwiper from '@/components/Swiper'
  import SeamlessScroll from '@/components/Scroll.vue'
  import ContentCard from '@/components/ContentCard.vue'
  import NoData from '@/components/noData.vue'
  import Loading from '@/components/loading/loading'
  import { httpReq } from '@/common/api'
  export default{
    name: 'Borrowing',
    components: {
      HomeSwiper,
      SeamlessScroll,
      ContentCard,
      Loading,
      NoData
    },
    data(){
        return{
          swiperList:[],
          productList:[],
          isKeep:false,
          waitingShow:true,
          loadding:false,
          listName:''
        }
    },
    methods: {
      ...mapMutations(['changeUserTel','changeUserToken']),
      toContent(){
        this.$router.push('/content')
      },
      getList(keyword,amount,listName){
        this.listName = listName;
        this.productList= [];
        this.loadding=true;
        const params = {
          pageNum: 1,
          pageSize: 999,
          amount: amount,
          keyword: keyword
        };
        httpReq('GET','/list/as/app/financial/normal/loanSupermarketProduct',params).then((res)=>{
          this.productList = res.rows;
          this.loadding=false
        }).catch((err)=>{
          this.$toast(err);
          this.loadding=false
        })
      },
      getSwiperList(){
          httpReq('GET','/list/as/app/financial/home/Carouse').then((res)=>{
            this.swiperList = res;
            if(!this.swiperList.length){
              this.waitingShow = false
            }
          }).catch((err)=>{
            this.waitingShow = false
          })
      }
    },
    created(){
      this.getList(1,'','热门推荐')
      this.getSwiperList()
      //获取url中的用户信息
//      const token = this.$route.query.token
//      const phone = this.$route.query.phone
//      if(token){
//        this.changeUserToken(token)
//      }
//      if(phone){
//        this.changeUserTel(phone)
//      }
    },
    activated(){
        this.isKeep = true
    },
    deactivated(){
      this.isKeep = false
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  @import "~style/mixins.styl"
  .waitting-swiper
    height :3.1rem
    background-color $bgWait
    margin .1rem .2rem .2rem .2rem
    box-shadow()
    border-radius :.2rem
    position relative
    .logo
      width 1.16rem
      height 1.46rem
      position absolute
      top 50%
      left 50%
      transform translate(-50%,-50%)
  .tab-icon-container
    display :flex
    margin .2rem 0 .4rem 0
    .tab-icon-item
      display flex
      flex-direction column
      flex 1
      align-items center
      .tab-icon-img
        width .88rem
        height .88rem
      .tab-icon-desc
        margin-top .22rem
        color $darkTextColor
  .list-title
    font-size .32rem
    color $darkTextColor
    font-weight bold
    padding .3rem .24rem
  .lists-content
    min-height 3.5rem
    position relative
    padding 0 .24rem
    .loading-container
      position: absolute
      width: 100%
      top: 50%
      transform: translateY(-50%)
</style>
